<template>
    <ContentBox title="城乡概览">
        <div class="content">
            <div>
                <div>
                    <img src="../../assets/image/lvhua.png" alt="">
                    <span>绿化</span>
                </div>
                <div style="color: #E45832;">
                    <span class="digiter-number digiterfontSize80" style="color: #E45832;">18.8</span>平方
                </div>
                <div>人均</div>
                <div style="color: #E45832;">
                    <span class="digiter-number digiterfontSize80" style="color: #E45832;">123</span>公顷
                </div>
                <div>总面积</div>
            </div>
            <div>
                <div>
                    <img src="../../assets/image/daolu.png" alt="">
                    <span>道路</span>
                </div>
                <div style="color: #01FFFF;">
                    <span class="digiter-number digiterfontSize80" style="color: #01FFFF;">18.8</span>平方
                </div>
                <div>人均</div>
                <div style="color: #01FFFF;">
                    <span class="digiter-number digiterfontSize80" style="color: #01FFFF;">123</span>万千米
                </div>
                <div>总面积</div>
            </div>
            <div>
                <div>
                    <img src="../../assets/image/bingchuang.png" alt="">
                    <span>病床</span>
                </div>
                <div style="color: #8C2EFF;">
                    <span class="digiter-number digiterfontSize80" style="color: #8C2EFF;">18.8</span>张
                </div>
                <div>每万人</div>
                <div style="color: #8C2EFF;">
                    <span class="digiter-number digiterfontSize80" style="color: #8C2EFF;">123</span>公顷
                </div>
                <div>总床位</div>
            </div>
            <div>
                <div>
                    <img src="../../assets/image/zhufang.png" alt="">
                    <span>住房</span>
                </div>
                <div style="color: #FEAC9C;">
                    <span class="digiter-number digiterfontSize80" style="color: #FEAC9C;">18.8</span>平方
                </div>
                <div>人均</div>
                <div style="color: #FEAC9C;">
                    <span class="digiter-number digiterfontSize80" style="color: #FEAC9C;">123</span>万平方
                </div>
                <div>总面积</div>
            </div>

        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    export default {
        name: "Preview",
        components: {
            ContentBox
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100%;
        padding: 40px;
        display: flex;
        flex-wrap: wrap;
        > div {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;

            &:nth-last-child(n+3) {
                border-bottom: 1px dashed #0096A1;
                padding-bottom: 20px;
            }
            &:nth-of-type(n+3) {
                padding-top: 20px;
            }
            &:nth-of-type(odd) {
                border-right: 1px dashed #0096A1;
            }
            > div {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 40px;

                &:first-child{
                    /*display: flex;*/
                    img {
                        margin-right: 50px;
                    }
                }


            }
        }
    }
</style>
